<script setup>
import { onMounted, ref } from "vue";
import {
  getUserAddressAPI,
  createUserAddressAPI,
} from "@/apis/user";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import { userInfoStore } from "@/stores/user";
import {addAddress, delAddress, updateAddress} from "@/apis/address.js";

const tableData = ref([]);
const showUpdate = ref(false);
const showCreate = ref(false);
const userInfo = userInfoStore().userInfo;
const updateAddressForm = ref({
  addressId: "",
  userId: userInfo.userId,
  address: "",
  addressStatus: 1,
  name: "",
  phone: "",
});
const createAddressForm = ref({
  userId: userInfo.userId,
  address: "",
  addressStatus: 1,
  name: "",
  phone: "",
});
const formLabelWidth = "140px";
const getUserAddress = async () => {
  let res = await getUserAddressAPI(userInfo.userId);
  console.log("res.data: ", res.data);
  tableData.value = res.data.data;
};
//修改地址
const openDialog = (row) => {
  console.log("row: ", row);
  updateAddressForm.value = { ...row };
  console.log("updateAddressForm.value: ", updateAddressForm.value);
  //updateAddressForm.value.addressStatus = updateAddressForm.value.addressStatus === 0 ? "默认地址" : "普通地址";
  updateAddressForm.value.addressStatus = updateAddressForm.value.addressStatus === "普通地址" ? 1 : 2;
  showUpdate.value = true;
};

const updateComfirm = async () => {
  showUpdate.value = false;

  // let res = await updateUserAddressAPI(
  //   updateAddressForm.value.addressId,
  //   updateAddressForm.value
  // );
  let res = await updateAddress(
    updateAddressForm.value
  )
  if (res.code === 200) {
    ElMessage({ type: "success", message: "地址已修改" });
  }
  getUserAddress();
};

const handleSelectChange = (value) => {
  updateAddressForm.value.addressStatus = value;
};
//添加地址
const createArress = () => {
  showCreate.value = true;
};

const creatHandleSelectChange = (value) => {
  createAddressForm.value.addressStatus = value;
};

const createComfirm = async () => {
  let res = await createUserAddressAPI({ ...createAddressForm.value });
  console.log(res);
  //   if (res.status === 200) {
  ElMessage({ type: "success", message: "新地址已添加" });
  await getUserAddress();
  //   }
  showCreate.value = false;
};

//删除地址
const clickDeleteAddress = async (row) =>
  {
    let res = await delAddress(row.addressId);
    console.log(res);
    // if (res.status === 200) {
    ElMessage({type: "success", message: "地址已删除"});
    // }
    await getUserAddress();

  }
const deleteArress = async (row) => {
  let res = await delAddress(row.addressId);
  console.log(res);
  if (res.code === 200) {
    ElMessage({ type: "success", message: "地址已删除" });
  }
  getUserAddress();
};

onMounted(() => getUserAddress());
</script>
<template>
  <div style="background-color: #f5f5f5">
    <el-button type="primary" class="button" @click="createArress">添加地址</el-button>
    <el-table :data="tableData" height="60vh" style="width: 100%" border>
      <el-table-column prop="name" label="姓名" width="180" align="center" />
      <el-table-column prop="phone" label="联系方式" width="180" align="center" />
      <el-table-column prop="address" label="详细地址" align="center" />
      <el-table-column prop="addressStatus" label="地址类型" align="center" >
        <template #default="scope">
          {{ scope.row.addressStatus === 1 ? "普通地址" : "默认地址" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button @click="openDialog(scope.row)">编辑</el-button>
          <el-button @click="clickDeleteAddress(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 修改地址弹窗 -->
  <el-dialog v-model="showUpdate" title="修改地址" width="500">
    <el-form :model="updateAddressForm">
      <el-form-item label="收件人姓名" :label-width="formLabelWidth">
        <el-input v-model="updateAddressForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="updateAddressForm.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="收件人详细地址" :label-width="formLabelWidth">
        <el-input v-model="updateAddressForm.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="收件人地址类型" :label-width="formLabelWidth">
        <el-select v-model="updateAddressForm.addressStatus" @change="handleSelectChange">
          <el-option label="普通地址" :value="1" />
          <el-option label="默认地址" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showUpdate = false">取消</el-button>
        <el-button type="primary" @click="updateComfirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加地址弹窗 -->
  <el-dialog v-model="showCreate" title="添加地址" width="500">
    <el-form :model="createAddressForm">
      <el-form-item label="收件人姓名" :label-width="formLabelWidth">
        <el-input v-model="createAddressForm.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="createAddressForm.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="收件人详细地址" :label-width="formLabelWidth">
        <el-input v-model="createAddressForm.address" autocomplete="off" />
      </el-form-item>

      <el-form-item label="收件人地址类型" :label-width="formLabelWidth">
        <el-select
          v-model="createAddressForm.addressStatus"
          @change="creatHandleSelectChange"
        >
          <el-option label="普通地址" :value="1" />
          <el-option label="默认地址" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="createComfirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.button {
  margin-bottom: 0.5em;
  width: 8%;
  float: right;
}
</style>
